<template>
  <el-table
    :data="tableData"
    @row-dblclick="RowClick"
    @cell-mouse-enter.self="HoverTable"
    @cell-mouse-leave.self="HoverTableLeave"
  >
    <el-table-column prop="id" label="编号" width="55" />
    <el-table-column prop="username" label="姓名" width="100" />
    <el-table-column prop="email" label="邮箱" />
  </el-table>
</template>

<script lang="ts" setup>
import { defineProps, ref } from "vue";
import { UserSearchOnlyIdAndEmail } from "../../../types/user";

const props = defineProps({
  userList: {
    type: Array,
    default: () => [],
  },
  repicentInpRef: {
    type: HTMLInputElement,
    default: () => null,
  },
});
const emits = defineEmits<{
  (event: "upisHoverTable", value: boolean): void;
  (event: "upSelectUser", value: UserSearchOnlyIdAndEmail): void;
}>();

let repicentInpRef = ref(props.repicentInpRef);
function RowClick(value: UserSearchOnlyIdAndEmail) {
  repicentInpRef.value.focus();
  emits("upSelectUser", value);
}
function HoverTable() {
  emits("upisHoverTable", true);
}
function HoverTableLeave() {
  emits("upisHoverTable", false);
}
const tableData = ref(props.userList);
</script>
